<template>
  <uni-nav-bar title="新建车用尿素外卖单" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">
    <view class="space-between">
      <view>单号</view>
      <view>{{ orderAll.order_sn }}</view>
    </view>
    <view class="space-between top">
      <view>下单时间</view>
      <view>{{ orderAll.createtime }}</view>
    </view>
    <view class="space-between top" v-if="orderAll.time">
      <view>预约时间</view>
      <view>{{ orderAll.time }}</view>
    </view>
    <view class="space-between top" style="align-items: flex-start;">
      <view>位置</view>
      <view style="width: 70%;text-align: right;">{{ orderAll.address }}</view>
    </view>
    <view class="space-between top">
      <view>车牌号</view>
      <view>{{ orderAll.cart_code }}</view>
    </view>
    <view class="space-between top">
      <view>加注量</view>
      <view>
        <text>{{ orderAll.amount }}</text>
        <text>公斤</text>
      </view>
    </view>
    <view class="space-between top">
      <view>消费者</view>
      <view>
        <text>{{ orderAll.driver_name }}</text>
        <text style="color: #1B91FF;margin-left: 5rpx;" @click="call(orderAll.driver_mobile)">
          {{ orderAll.driver_mobile }}
        </text>
      </view>
    </view>
    <view class="space-between top">
      <view>加注员</view>
      <view>
        <text>{{ orderAll.plug_name }}</text>
        <text style="color: #1B91FF;margin-left: 5rpx;" @click="call(orderAll.plug_mobile)">
          {{ orderAll.plug_mobile }}
        </text>
      </view>
    </view>
    <view class="space-between top" v-if="fillName || orderAll.fill_name">
      <view>加注机</view>
      <view>{{ orderAll.fill_name ? orderAll.fill_name : fillName }}</view>
    </view>
    <view class="space-between top">
      <view>实际加注量</view>
      <view>{{ orderAll.fill_amount }}公斤</view>
    </view>
  </view>
  <view class="bort scan" @click="scanCode()" v-if="orderAll.fill_status == 0 && !fillName">扫加注机二维码</view>
  <view class="bort fill" @click="submit()" v-if="fillName && orderAll.fill_status == 0 && !wait">开始加注</view>
  <view class="bort rob" @click="init()" v-if="orderAll.fill_status < 3 && wait">查看加注结果</view>
  <view class="bort sus" v-if="orderAll.fill_status > 2">加注已完成</view>
  <!-- 加注机状态； -->
  <FillStatus @fillStatus="fillStatus" ref="filling"></FillStatus>
</template>

<script setup lang="ts">
import { navBack } from '@/utils/navigator';
import { onLoad } from '@dcloudio/uni-app';
import { getDriverID } from '@/stores/driverID';
import { showLoading, showToast, errorToast, successToast } from '@/utils/prompt';
import FillStatus from '@c/canCode/fillingStatus.vue';
import { fillingListA, getOrderInfo } from '@/gql/filling';
import { toPublish } from '@mqtt';
import { ref } from 'vue';
// #ifdef H5
import { scanQRCode } from '@/utils/wechat.jssdk';
// #endif
const driver_id = getDriverID();
const fillName = ref('');
const orderIDs = ref('');

const filling = ref(null);

const orderID = ref('');
const orderAll = ref({});
const wait = ref(false);
onLoad((pearm) => {
  orderID.value = pearm.id;
  init();
});
function init() {
  showLoading();
  const payload = {
    query: getOrderInfo,
    variables: {
      order_id: Number(orderID.value),
    },
  };
  toPublish('ql/take/getOrderInfo', payload, (obj: any) => {
    const { getOrderInfo } = obj.data;
    orderAll.value = getOrderInfo;
  });
}
/**
 * 扫加注机二维码
 */
function scanCode() {
  scanQRCode((res) => {
    orderIDs.value = res.resultStr.split('fill_id=')[1];
    if (orderIDs.value) {
      fillLists();
    } else {
      alert('请扫描正确的二维码进行加注');
    }
  });
}
/**
 * 获取加注机详情
 */
function fillLists() {
  showLoading('加载中');
  const payload = {
    query: fillingListA,
    variables: {
      driver_id,
      id: orderIDs.value,
    },
  };
  toPublish('ql/driver/getFilling', payload, (obj: any) => {
    uni.hideLoading();
    const { fill } = obj.data;
    fillName.value = fill.name;
    uni.setStorageSync('fillingID', fill.id);
    uni.setStorageSync('jzjfilling', fill.imsi);
    begin();
  });
}
function begin() {
  // 提交检测加注机状态
  filling.value.FillingMachine();
  // 订阅加注机返回信息
  filling.value.ComeBackFilling();
}
/**
 * 加注机状态
 */
function fillStatus(num: string) {
  if (num == 'task_ready_ack' || num == 'circle_upload_ack') {
    // submit();
  } else {
    showToast('当前加注机繁忙 请稍后重试');
    return;
  }
}
/**
 * 提交加注订单
 */
function submit() {
  const payload = {
    order_id: Number(orderID.value),
    fill_id: orderIDs.value,
  };
  toPublish('plug/updateFilling', payload, (obj: any) => {
    const { code, msg } = obj;
    if (code === 1) {
      successToast(msg);
      wait.value = true;
      init();
    } else {
      errorToast(msg);
    }
  });
}
/**
 * @param {String} num 拨打的手机号码
 */
function call(num) {
  uni.makePhoneCall({
    phoneNumber: num,
  });
}
</script>

<style scoped lang="less">
.top {
  margin-top: 20rpx;
}
.bort {
  width: 428rpx;
  height: 98rpx;
  box-shadow: 1px 2px 4px 0px rgba(204, 204, 204, 0.5);
  border-radius: 5px;
  text-align: center;
  line-height: 98rpx;
  color: #fff;
  margin: 40rpx auto;
}
.scan {
  background-color: #1b91ff;
}
.fill {
  background-color: #0ebc03;
}
.sus {
  background-color: #d8d4d4;
}
.rob {
  background-color: #fd9b00;
}
</style>
